<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例网站</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        neutral: '#F8FAFC',
                        'neutral-dark': '#1E293B'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-transform-opacity {
                transition-property: transform, opacity;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral text-gray-800 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="#" class="flex items-center">
                        <i class="fa fa-rocket text-primary text-2xl mr-2"></i>
                        <span class="text-xl font-bold text-primary">示例网站</span>
                    </a>
                    <nav class="hidden md:ml-10 md:flex space-x-8">
                        <a href="#home" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">首页</a>
                        <a href="#features" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">特性</a>
                        <a href="#services" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">服务</a>
                        <a href="#testimonials" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">评价</a>
                        <a href="#contact" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors">联系我们</a>
                    </nav>
                </div>
                <div class="hidden md:flex items-center space-x-4">
                    <a href="#" class="text-gray-700 hover:text-primary transition-colors">
                        <i class="fa fa-search text-lg"></i>
                    </a>
                    <a href="#" class="text-gray-700 hover:text-primary transition-colors">
                        <i class="fa fa-user-circle text-lg"></i>
                    </a>
                    <a href="#" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">
                        登录
                    </a>
                </div>
                <div class="md:hidden flex items-center">
                    <button id="mobile-menu-button" class="text-gray-700 hover:text-primary">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="#home" class="text-gray-700 hover:text-primary block px-3 py-2 text-base font-medium">首页</a>
                <a href="#features" class="text-gray-700 hover:text-primary block px-3 py-2 text-base font-medium">特性</a>
                <a href="#services" class="text-gray-700 hover:text-primary block px-3 py-2 text-base font-medium">服务</a>
                <a href="#testimonials" class="text-gray-700 hover:text-primary block px-3 py-2 text-base font-medium">评价</a>
                <a href="#contact" class="text-gray-700 hover:text-primary block px-3 py-2 text-base font-medium">联系我们</a>
            </div>
            <div class="pt-4 pb-3 border-t">
                <div class="flex items-center px-5">
                    <div class="flex-shrink-0">
                        <i class="fa fa-user-circle text-2xl text-gray-400"></i>
                    </div>
                    <div class="ml-3">
                        <div class="text-base font-medium text-gray-800">未登录</div>
                        <div class="text-sm font-medium text-gray-500">登录以访问更多功能</div>
                    </div>
                </div>
                <div class="mt-3 px-2 space-y-1">
                    <a href="#" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary">登录</a>
                    <a href="#" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary">注册</a>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow">
        <!-- 英雄区 -->
        <section id="home" class="relative bg-gradient-to-br from-primary/10 to-primary/5 py-20 md:py-28 overflow-hidden">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div class="max-w-3xl mx-auto text-center">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-gray-900 leading-tight mb-6">
                        让你的想法<span class="text-primary">变为现实</span>
                    </h1>
                    <p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-600 mb-8 leading-relaxed">
                        我们提供创新的解决方案，帮助企业和个人实现数字化转型，创造更美好的未来。
                    </p>
                    <div class="flex flex-col sm:flex-row justify-center gap-4">
                        <a href="#contact" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg text-lg font-medium transition-all transform hover:scale-105 hover:shadow-lg">
                            开始项目
                        </a>
                        <a href="#features" class="bg-white hover:bg-gray-50 text-primary border border-primary px-8 py-3 rounded-lg text-lg font-medium transition-all hover:shadow-md">
                            了解更多
                        </a>
                    </div>
                </div>
            </div>
            <!-- 装饰元素 -->
            <div class="absolute top-0 right-0 w-1/3 h-full bg-primary/5 rounded-l-full -z-10"></div>
            <div class="absolute bottom-0 left-0 w-1/4 h-1/2 bg-primary/5 rounded-tr-full -z-10"></div>
        </section>

        <!-- 特性区 -->
        <section id="features" class="py-20 bg-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900 mb-4">我们的特性</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">探索我们提供的一系列强大功能，帮助你轻松实现目标</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- 特性卡片 1 -->
                    <div class="bg-white rounded-xl shadow-sm hover:shadow-lg transition-all p-6 border border-gray-100 group">
                        <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors">
                            <i class="fa fa-lightbulb-o text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3 text-gray-900">创新解决方案</h3>
                        <p class="text-gray-600 mb-4">我们提供前沿的技术解决方案，帮助你在竞争激烈的市场中脱颖而出。</p>
                        <a href="#" class="inline-flex items-center text-primary font-medium group-hover:underline">
                            了解更多 <i class="fa fa-arrow-right ml-2 text-sm"></i>
                        </a>
                    </div>

                    <!-- 特性卡片 2 -->
                    <div class="bg-white rounded-xl shadow-sm hover:shadow-lg transition-all p-6 border border-gray-100 group">
                        <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors">
                            <i class="fa fa-line-chart text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3 text-gray-900">数据分析</h3>
                        <p class="text-gray-600 mb-4">利用先进的数据分析工具，帮助你从复杂的数据中提取有价值的信息。</p>
                        <a href="#" class="inline-flex items-center text-primary font-medium group-hover:underline">
                            了解更多 <i class="fa fa-arrow-right ml-2 text-sm"></i>
                        </a>
                    </div>

                    <!-- 特性卡片 3 -->
                    <div class="bg-white rounded-xl shadow-sm hover:shadow-lg transition-all p-6 border border-gray-100 group">
                        <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors">
                            <i class="fa fa-shield text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3 text-gray-900">安全保障</h3>
                        <p class="text-gray-600 mb-4">我们提供多层次的安全保障，确保你的数据和业务不受任何威胁。</p>
                        <a href="#" class="inline-flex items-center text-primary font-medium group-hover:underline">
                            了解更多 <i class="fa fa-arrow-right ml-2 text-sm"></i>
                        </a>
                    </div>

                    <!-- 特性卡片 4 -->
                    <div class="bg-white rounded-xl shadow-sm hover:shadow-lg transition-all p-6 border border-gray-100 group">
                        <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors">
                            <i class="fa fa-users text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3 text-gray-900">用户体验</h3>
                        <p class="text-gray-600 mb-4">我们专注于打造直观、高效的用户体验，让你的产品赢得用户喜爱。</p>
                        <a href="#" class="inline-flex items-center text-primary font-medium group-hover:underline">
                            了解更多 <i class="fa fa-arrow-right ml-2 text-sm"></i>
                        </a>
                    </div>

                    <!-- 特性卡片 5 -->
                    <div class="bg-white rounded-xl shadow-sm hover:shadow-lg transition-all p-6 border border-gray-100 group">
                        <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors">
                            <i class="fa fa-cogs text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3 text-gray-900">易于集成</h3>
                        <p class="text-gray-600 mb-4">我们的解决方案可以轻松集成到你现有的系统中，无需复杂的配置。</p>
                        <a href="#" class="inline-flex items-center text-primary font-medium group-hover:underline">
                            了解更多 <i class="fa fa-arrow-right ml-2 text-sm"></i>
                        </a>
                    </div>

                    <!-- 特性卡片 6 -->
                    <div class="bg-white rounded-xl shadow-sm hover:shadow-lg transition-all p-6 border border-gray-100 group">
                        <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors">
                            <i class="fa fa-headphones text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3 text-gray-900">24/7支持</h3>
                        <p class="text-gray-600 mb-4">我们提供全天候的技术支持，确保你的业务始终顺利运行。</p>
                        <a href="#" class="inline-flex items-center text-primary font-medium group-hover:underline">
                            了解更多 <i class="fa fa-arrow-right ml-2 text-sm"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 服务介绍 -->
        <section id="services" class="py-20 bg-gray-50">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900 mb-4">我们的服务</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">我们提供全方位的技术服务，满足你的各种需求</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <div class="order-2 lg:order-1">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">网站开发</h3>
                        <p class="text-gray-600 mb-6">我们提供专业的网站开发服务，从简单的展示型网站到复杂的电子商务平台，都能满足你的需求。我们的团队拥有丰富的经验，能够为你打造出视觉吸引力强、功能完善、用户体验优秀的网站。</p>
                        
                        <div class="space-y-4 mb-8">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 mt-1">
                                    <i class="fa fa-check-circle text-secondary text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <h4 class="text-lg font-medium text-gray-900">响应式设计</h4>
                                    <p class="text-gray-600">网站在各种设备上都能完美展示</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="flex-shrink-0 mt-1">
                                    <i class="fa fa-check-circle text-secondary text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <h4 class="text-lg font-medium text-gray-900">高性能优化</h4>
                                    <p class="text-gray-600">确保网站加载速度快，性能卓越</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="flex-shrink-0 mt-1">
                                    <i class="fa fa-check-circle text-secondary text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <h4 class="text-lg font-medium text-gray-900">SEO友好</h4>
                                    <p class="text-gray-600">网站结构优化，有利于搜索引擎排名</p>
                                </div>
                            </div>
                        </div>
                        
                        <a href="#contact" class="inline-flex items-center bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg text-lg font-medium transition-all transform hover:scale-105">
                            了解更多 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                    
                    <div class="order-1 lg:order-2 relative">
                        <div class="relative z-10 rounded-xl overflow-hidden shadow-xl transform hover:scale-[1.02] transition-transform duration-500">
                            <img src="https://picsum.photos/800/600?random=1" alt="网站开发示例" class="w-full h-auto">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
                                <div class="p-6">
                                    <h4 class="text-white text-xl font-bold mb-2">企业官网</h4>
                                    <p class="text-white/80">专业设计，展示企业形象</p>
                                </div>
                            </div>
                        </div>
                        <div class="absolute -bottom-6 -left-6 w-40 h-40 bg-secondary/20 rounded-full -z-10"></div>
                        <div class="absolute -top-6 -right-6 w-32 h-32 bg-primary/20 rounded-full -z-10"></div>
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mt-16">
                    <div class="relative">
                        <div class="relative z-10 rounded-xl overflow-hidden shadow-xl transform hover:scale-[1.02] transition-transform duration-500">
                            <img src="https://picsum.photos/800/600?random=2" alt="移动应用开发示例" class="w-full h-auto">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
                                <div class="p-6">
                                    <h4 class="text-white text-xl font-bold mb-2">移动应用</h4>
                                    <p class="text-white/80">跨平台应用，覆盖更多用户</p>
                                </div>
                            </div>
                        </div>
                        <div class="absolute -bottom-6 -right-6 w-40 h-40 bg-secondary/20 rounded-full -z-10"></div>
                        <div class="absolute -top-6 -left-6 w-32 h-32 bg-primary/20 rounded-full -z-10"></div>
                    </div>
                    
                    <div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">移动应用开发</h3>
                        <p class="text-gray-600 mb-6">我们专注于开发高质量的移动应用，无论是iOS还是Android平台，我们都能为你提供专业的解决方案。我们的应用具有流畅的用户体验、精美的界面设计和强大的功能，帮助你在移动市场中取得成功。</p>
                        
                        <div class="space-y-4 mb-8">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 mt-1">
                                    <i class="fa fa-check-circle text-secondary text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <h4 class="text-lg font-medium text-gray-900">原生应用</h4>
                                    <p class="text-gray-600">为每个平台开发专用应用</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="flex-shrink-0 mt-1">
                                    <i class="fa fa-check-circle text-secondary text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <h4 class="text-lg font-medium text-gray-900">跨平台开发</h4>
                                    <p class="text-gray-600">一次开发，多平台部署</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="flex-shrink-0 mt-1">
                                    <i class="fa fa-check-circle text-secondary text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <h4 class="text-lg font-medium text-gray-900">应用商店优化</h4>
                                    <p class="text-gray-600">提高应用在应用商店中的可见性</p>
                                </div>
                            </div>
                        </div>
                        
                        <a href="#contact" class="inline-flex items-center bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg text-lg font-medium transition-all transform hover:scale-105">
                            了解更多 <i class="fa fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 客户评价 -->
        <section id="testimonials" class="py-20 bg-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900 mb-4">客户评价</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">听听我们的客户怎么说</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <!-- 评价卡片 1 -->
                    <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-all">
                        <div class="flex items-center mb-4">
                            <img src="https://picsum.photos/100/100?random=3" alt="客户头像" class="w-12 h-12 rounded-full object-cover">
                            <div class="ml-4">
                                <h4 class="text-lg font-medium text-gray-900">张三</h4>
                                <p class="text-gray-500 text-sm">CEO, 科技公司</p>
                            </div>
                        </div>
                        <div class="mb-4">
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                        </div>
                        <p class="text-gray-600 italic">"与这个团队合作是一次非常愉快的经历。他们不仅按时交付了项目，而且质量超出了我们的期望。他们的专业知识和创新思维帮助我们实现了业务目标。"</p>
                    </div>

                    <!-- 评价卡片 2 -->
                    <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-all">
                        <div class="flex items-center mb-4">
                            <img src="https://picsum.photos/100/100?random=4" alt="客户头像" class="w-12 h-12 rounded-full object-cover">
                            <div class="ml-4">
                                <h4 class="text-lg font-medium text-gray-900">李四</h4>
                                <p class="text-gray-500 text-sm">市场总监, 电商平台</p>
                            </div>
                        </div>
                        <div class="mb-4">
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star-half-o text-yellow-400"></i>
                        </div>
                        <p class="text-gray-600 italic">"我们的移动应用在发布后获得了很多积极反馈，这都归功于开发团队的专业工作。他们不仅关注技术实现，还非常重视用户体验，这使我们的应用在市场上脱颖而出。"</p>
                    </div>

                    <!-- 评价卡片 3 -->
                    <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-all">
                        <div class="flex items-center mb-4">
                            <img src="https://picsum.photos/100/100?random=5" alt="客户头像" class="w-12 h-12 rounded-full object-cover">
                            <div class="ml-4">
                                <h4 class="text-lg font-medium text-gray-900">王五</h4>
                                <p class="text-gray-500 text-sm">创始人, 初创公司</p>
                            </div>
                        </div>
                        <div class="mb-4">
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                            <i class="fa fa-star text-yellow-400"></i>
                        </div>
                        <p class="text-gray-600 italic">"作为一家初创公司，我们需要一个既专业又有创新精神的团队来帮助我们实现愿景。这个团队不仅满足了我们的需求，还提供了很多有价值的建议，帮助我们避免了许多潜在的问题。"</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 联系我们 -->
        <section id="contact" class="py-20 bg-gray-50">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900 mb-4">联系我们</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">有任何问题或需求，请随时与我们联系</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                    <div>
                        <div class="bg-white p-8 rounded-xl shadow-sm mb-8">
                            <h3 class="text-xl font-bold text-gray-900 mb-6">发送消息</h3>
                            <form>
                                <div class="mb-4">
                                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                    <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入您的姓名">
                                </div>
                                <div class="mb-4">
                                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                                    <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入您的邮箱">
                                </div>
                                <div class="mb-4">
                                    <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">主题</label>
                                    <input type="text" id="subject" name="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入消息主题">
                                </div>
                                <div class="mb-6">
                                    <label for="message" class="block text-sm font-medium text-gray-700 mb-1">消息</label>
                                    <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入您的消息"></textarea>
                                </div>
                                <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white py-3 rounded-lg text-lg font-medium transition-colors">
                                    发送消息
                                </button>
                            </form>
                        </div>
                    </div>
                    
                    <div>
                        <div class="bg-white p-8 rounded-xl shadow-sm mb-8">
                            <h3 class="text-xl font-bold text-gray-900 mb-6">联系方式</h3>
                            <div class="space-y-6">
                                <div class="flex items-start">
                                    <div class="flex-shrink-0 w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
                                        <i class="fa fa-map-marker text-primary text-xl"></i>
                                    </div>
                                    <div class="ml-4">
                                        <h4 class="text-lg font-medium text-gray-900">地址</h4>
                                        <p class="text-gray-600">北京市朝阳区科技园区8号楼</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <div class="flex-shrink-0 w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
                                        <i class="fa fa-phone text-primary text-xl"></i>
                                    </div>
                                    <div class="ml-4">
                                        <h4 class="text-lg font-medium text-gray-900">电话</h4>
                                        <p class="text-gray-600">+86 10 8888 8888</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <div class="flex-shrink-0 w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
                                        <i class="fa fa-envelope text-primary text-xl"></i>
                                    </div>
                                    <div class="ml-4">
                                        <h4 class="text-lg font-medium text-gray-900">邮箱</h4>
                                        <p class="text-gray-600">info@example.com</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <div class="flex-shrink-0 w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
                                        <i class="fa fa-clock-o text-primary text-xl"></i>
                                    </div>
                                    <div class="ml-4">
                                        <h4 class="text-lg font-medium text-gray-900">工作时间</h4>
                                        <p class="text-gray-600">周一至周五: 9:00 - 18:00</p>
                                        <p class="text-gray-600">周六: 10:00 - 16:00</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white p-8 rounded-xl shadow-sm">
                            <h3 class="text-xl font-bold text-gray-900 mb-6">关注我们</h3>
                            <div class="flex space-x-4">
                                <a href="#" class="w-12 h-12 bg-[#1877F2]/10 hover:bg-[#1877F2]/20 text-[#1877F2] rounded-full flex items-center justify-center transition-colors">
                                    <i class="fa fa-facebook"></i>
                                </a>
                                <a href="#" class="w-12 h-12 bg-[#1DA1F2]/10 hover:bg-[#1DA1F2]/20 text-[#1DA1F2] rounded-full flex items-center justify-center transition-colors">
                                    <i class="fa fa-twitter"></i>
                                </a>
                                <a href="#" class="w-12 h-12 bg-[#0A66C2]/10 hover:bg-[#0A66C2]/20 text-[#0A66C2] rounded-full flex items-center justify-center transition-colors">
                                    <i class="fa fa-linkedin"></i>
                                </a>
                                <a href="#" class="w-12 h-12 bg-[#E4405F]/10 hover:bg-[#E4405F]/20 text-[#E4405F] rounded-full flex items-center justify-center transition-colors">
                                    <i class="fa fa-instagram"></i>
                                </a>
                                <a href="#" class="w-12 h-12 bg-[#FF0000]/10 hover:bg-[#FF0000]/20 text-[#FF0000] rounded-full flex items-center justify-center transition-colors">
                                    <i class="fa fa-youtube-play"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white pt-16 pb-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center mb-6">
                        <i class="fa fa-rocket text-primary text-2xl mr-2"></i>
                        <span class="text-xl font-bold">示例网站</span>
                    </div>
                    <p class="text-gray-400 mb-6">我们致力于为客户提供最优质的技术解决方案，帮助他们实现业务目标。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-linkedin"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-instagram"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">快速链接</h4>
                    <ul class="space-y-3">
                        <li><a href="#home" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="#features" class="text-gray-400 hover:text-white transition-colors">特性</a></li>
                        <li><a href="#services" class="text-gray-400 hover:text-white transition-colors">服务</a></li>
                        <li><a href="#testimonials" class="text-gray-400 hover:text-white transition-colors">评价</a></li>
                        <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">服务</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">网站开发</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">移动应用开发</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">数据分析</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">UI/UX设计</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">技术咨询</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">订阅通讯</h4>
                    <p class="text-gray-400 mb-4">订阅我们的通讯，获取最新的产品更新和优惠信息。</p>
                    <form class="mb-4">
                        <div class="flex">
                            <input type="email" placeholder="您的邮箱地址" class="flex-1 px-4 py-2 rounded-l-lg focus:outline-none text-gray-900">
                            <button type="submit" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-r-lg transition-colors">
                                订阅
                            </button>
                        </div>
                    </form>
                    <p class="text-gray-500 text-sm">我们尊重您的隐私，不会向第三方分享您的信息。</p>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2025 示例网站. 保留所有权利.</p>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">隐私政策</a>
                        <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">服务条款</a>
                        <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">Cookie政策</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 100) {
                navbar.classList.add('shadow-md');
                navbar.classList.remove('shadow-sm');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.add('shadow-sm');
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 如果是移动端，点击后关闭菜单
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });
        
        // 元素进入视口时的动画效果
        const animateOnScroll = () => {
            const elements = document.querySelectorAll('.grid > div, section > div > div.text-center, .container > div > h2');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.3;
                
                if (elementPosition < screenPosition) {
                    element.classList.add('opacity-100', 'translate-y-0');
                    element.classList.remove('opacity-0', 'translate-y-8');
                }
            });
        };
        
        // 初始设置
        document.querySelectorAll('.grid > div, section > div > div.text-center, .container > div > h2').forEach(element => {
            element.classList.add('transition-all', 'duration-700', 'ease-out', 'opacity-0', 'translate-y-8');
        });
        
        // 滚动时触发动画
        window.addEventListener('scroll', animateOnScroll);
        
        // 初始加载时触发一次动画
        window.addEventListener('load', animateOnScroll);
    </script>
</body>
</html>
    